// pages/provinceMap/provinceMap.js
Page({
  data: {
    zoomLevel: 1,
    tooltipVisible: false,
    tooltipX: 0,
    tooltipY: 0,
    currentProvince: '',
    currentBrand: '',
    // 双指缩放相关数据
    lastTouchDistance: 0,
    isZooming: false,
    touchStartTime: 0,
    
    // 奶茶品牌数据
    provinceBrands: [
      { province: '北京', brand: '茶百道' },
      { province: '上海', brand: '乐乐茶' },
      { province: '广东', brand: '喜茶' },
      { province: '浙江', brand: '古茗' },
      { province: '江苏', brand: '茶颜悦色' },
      { province: '山东', brand: '蜜雪冰城' },
      { province: '河南', brand: '蜜雪冰城' },
      { province: '湖南', brand: '茶颜悦色' },
      { province: '湖北', brand: '书亦烧仙草' },
      { province: '四川', brand: '1点点' },
      { province: '重庆', brand: '益禾堂' },
      { province: '云南', brand: '霸王茶姬' },
      { province: '贵州', brand: '古茗' },
      { province: '西藏', brand: '甜啦啦' },
      { province: '新疆', brand: '茶百道' },
      { province: '青海', brand: '茶百道' },
      { province: '甘肃', brand: '蜜雪冰城' },
      { province: '宁夏', brand: '蜜雪冰城' },
      { province: '内蒙古', brand: '茶百道' },
      { province: '黑龙江', brand: '蜜雪冰城' },
      { province: '吉林', brand: '蜜雪冰城' },
      { province: '辽宁', brand: '书亦烧仙草' },
      { province: '河北', brand: '蜜雪冰城' },
      { province: '天津', brand: '茶百道' },
      { province: '山西', brand: '蜜雪冰城' },
      { province: '陕西', brand: '茶百道' },
      { province: '安徽', brand: '古茗' },
      { province: '江西', brand: '古茗' },
      { province: '福建', brand: '1点点' },
      { province: '台湾', brand: '50岚' },
      { province: '海南', brand: '益禾堂' },
      { province: '广西', brand: '益禾堂' },
      { province: '香港', brand: '贡茶' },
      { province: '澳门', brand: '贡茶' }
    ],
    
    // 省份区域数据（使用rpx单位，适合响应式布局）
    provincesData: [
      { name: '北京', x: 350, y: 80, width: 80, height: 60 },
      { name: '天津', x: 430, y: 80, width: 60, height: 50 },
      { name: '上海', x: 520, y: 240, width: 60, height: 50 },
      { name: '重庆', x: 280, y: 300, width: 80, height: 60 },
      { name: '河北', x: 320, y: 90, width: 120, height: 100 },
      { name: '河南', x: 300, y: 200, width: 120, height: 80 },
      { name: '云南', x: 200, y: 350, width: 140, height: 120 },
      { name: '辽宁', x: 450, y: 40, width: 100, height: 80 },
      { name: '黑龙江', x: 420, y: 10, width: 160, height: 70 },
      { name: '湖南', x: 280, y: 280, width: 100, height: 80 },
      { name: '安徽', x: 420, y: 220, width: 80, height: 80 },
      { name: '山东', x: 380, y: 160, width: 120, height: 70 },
      { name: '新疆', x: 30, y: 120, width: 200, height: 200 },
      { name: '江苏', x: 450, y: 200, width: 100, height: 80 },
      { name: '浙江', x: 500, y: 250, width: 80, height: 70 },
      { name: '江西', x: 400, y: 280, width: 80, height: 80 },
      { name: '湖北', x: 350, y: 250, width: 100, height: 70 },
      { name: '广西', x: 250, y: 380, width: 120, height: 80 },
      { name: '甘肃', x: 200, y: 150, width: 140, height: 120 },
      { name: '山西', x: 290, y: 150, width: 80, height: 80 },
      { name: '内蒙古', x: 250, y: 60, width: 300, height: 90 },
      { name: '陕西', x: 270, y: 180, width: 80, height: 100 },
      { name: '吉林', x: 450, y: 80, width: 100, height: 60 },
      { name: '福建', x: 480, y: 320, width: 80, height: 80 },
      { name: '贵州', x: 240, y: 320, width: 100, height: 70 },
      { name: '广东', x: 350, y: 380, width: 140, height: 70 },
      { name: '青海', x: 150, y: 170, width: 120, height: 100 },
      { name: '西藏', x: 80, y: 250, width: 180, height: 120 },
      { name: '四川', x: 220, y: 250, width: 120, height: 100 },
      { name: '宁夏', x: 250, y: 150, width: 50, height: 60 },
      { name: '海南', x: 350, y: 450, width: 80, height: 50 },
      { name: '台湾', x: 550, y: 360, width: 50, height: 100 },
      { name: '香港', x: 490, y: 420, width: 30, height: 30 },
      { name: '澳门', x: 480, y: 440, width: 25, height: 25 }
    ]
  },

  onLoad: function (options) {
    // 页面加载时的初始化
  },

  // 双指缩放相关函数
  getTouchDistance: function(touches) {
    const touch1 = touches[0];
    const touch2 = touches[1];
    return Math.sqrt(
      Math.pow(touch1.clientX - touch2.clientX, 2) + Math.pow(touch1.clientY - touch2.clientY, 2)
    );
  },

  setZoomLevel: function(newZoom) {
    const clampedZoom = Math.max(0.5, Math.min(3, newZoom));
    this.setData({ zoomLevel: clampedZoom });
  },

  // 地图触摸事件处理
  onMapTouchStart: function(e) {
    this.setData({ touchStartTime: Date.now() });
    
    if (e.touches.length === 2) {
      // 双指触摸开始缩放
      const distance = this.getTouchDistance(e.touches);
      this.setData({
        lastTouchDistance: distance,
        isZooming: true
      });
      this.hideTooltip();
    } else if (e.touches.length === 1) {
      // 单指触摸
      this.setData({ isZooming: false });
    }
  },

  onMapTouchMove: function(e) {
    if (e.touches.length === 2 && this.data.isZooming) {
      // 双指缩放
      const distance = this.getTouchDistance(e.touches);
      if (this.data.lastTouchDistance > 0) {
        const scale = distance / this.data.lastTouchDistance;
        const newZoom = this.data.zoomLevel * scale;
        this.setZoomLevel(newZoom);
      }
      this.setData({ lastTouchDistance: distance });
    }
  },

  onMapTouchEnd: function(e) {
    if (e.touches.length === 0) {
      this.setData({ 
        isZooming: false,
        lastTouchDistance: 0
      });
    }
  },

  // 省份点击事件
  onProvinceClick: function(e) {
    const provinceName = e.currentTarget.dataset.province;
    const brandData = this.data.provinceBrands.find(item => item.province === provinceName);
    
    if (brandData) {
      // 获取点击的省份区域信息
      const provinceData = this.data.provincesData.find(item => item.name === provinceName);
      
      if (provinceData) {
        // 计算悬浮框位置（在省份中心上方）
        const centerX = provinceData.x + provinceData.width / 2;
        const centerY = provinceData.y;
        
        this.setData({
          currentProvince: provinceName,
          currentBrand: brandData.brand,
          tooltipVisible: true,
          tooltipX: centerX,
          tooltipY: centerY - 80 // 在省份上方显示
        });

        // 3秒后自动隐藏悬浮框
        setTimeout(() => {
          this.hideTooltip();
        }, 3000);
      }
    }
  },

  // 隐藏悬浮框
  hideTooltip: function() {
    this.setData({
      tooltipVisible: false,
      currentProvince: ''
    });
  }
});